<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app12">
    <!--文本插值 Mustache语法-->
    <!--{{ message }}-->

    <!--v-once指令 一次性插值 数据改变时插值不会更新-->
    <!--<span v-once>{{ message }}</span>-->

    <!--原始HTML-->
    <!--<span v-html="message"></span>-->

    <!--绑定DOM的属性使用 v-bind 指令-->
    <!--<p v-bind:class="myclass">v-bind test</p>-->

    <!--Vue.js 提供了完全的 JavaScript 表达式支持-->
    {{num+1}}
    {{ok?'yes':'no'}}
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app12',
        data: {
            message: 'Hello Vue!',
            myclass: 'one',
            num: 1,
            ok: true,
        }
    });
    app.message = "Hello Vue 2.0！"
    app.message = "<span style='color: red'>GoodBye Vue!</span>"
    app.myclass = 'two'
</script>
</body>

<style type="text/css">
    .one {
        color: pink;
    }

    .two {
        color: olivedrab;
    }
</style>
</html>